import React from 'react';

import {
  View,
  Text,
  Image,
} from 'react-native';

import ViewPager from 'react-native-viewpager';

import {Button} from 'react-native-elements';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import BasePage from '../common/BasePage';
import Platform from 'Platform';
const IMAGES = [require("../../../resource/images/login/LaunchImage1.png"), require("../../../resource/images/login/LaunchImage2.png")];

export default class WelcomePage extends BasePage {
  constructor(props) {
    super(props);

    this._dataSource = new ViewPager.DataSource({
      pageHasChanged: (p1, p2) => p1 !== p2,
    });
    this.state.imageDatas = this._dataSource.cloneWithPages(IMAGES);
    // this.props.pageData.routeData.authorization;

    this._imageHeight = Platform.OS === "ios"?(SizeUtils.getWindowSize().height - Config.tabBarTop)
    :SizeUtils.getWindowSize().height;
  }

  render() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
        height:SizeUtils.getWindowSize().height }}>
        <ViewPager
          ref={(viewpager) => {this.viewpager = viewpager}}
          style={{width:SizeUtils.getWindowSize().width,
            height:this._imageHeight}}
          dataSource={this.state.imageDatas}
          renderPage={this._renderPage.bind(this)}
          isLoop={false}
          autoPlay={false}/>
        {this._renderButton()}
      </View>
    );
  }

  _renderPage(data, pageID) {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
        height:this._imageHeight}} >
        <Image source={data} style={{width:SizeUtils.getWindowSize().width,
          height:this._imageHeight}} />
      </View>
    )
  }

  _renderButton() {
    return (
      <View style={{
          position:"absolute", bottom:SizeUtils.translateDesignHeightToCode(20),
          left:(SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(356 + 60))/2,
          // left:SizeUtils.translateDesignWidthToCode(356)
        }}>
        <Button
          backgroundColor="#db3132"
          disabled = {this.state.userNo == "" || this.state.password == ""}
          buttonStyle = {{width: SizeUtils.translateDesignWidthToCode(356), height:SizeUtils.translateDesignHeightToCode(80),
            borderRadius:30, }}
          textStyle={{fontSize: SizeUtils.translateFontSizeToCode(36), fontWeight:"bold"}}
          title = "进  入"
          onPress = {() => this._onPressEnterBtn()}
        />
      </View>
    )
  }

  _onPressEnterBtn() {
    if(this.props.pageData.routeData.authorization) {
      if(this.props.pageData.routeData.authorization != null && this.props.pageData.routeData.authorization != "0"){
        this.gotoPage(Config.pages.home);
      }else{
         this.gotoPage(Config.pages.login);
      }
    }
    else {
      this.gotoPage(Config.pages.login);
    }
  }
}
